<template>
  <div class="box-container">
    <div class="content">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div class="box-left box">
            <div class="title">企业方</div>
            <div class="img"></div>
            <div class="desc">认证/检测/咨询/培训需求</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div class="box-center">
            <div class="wx"></div>
            <div class="desc">手机微信扫描二维码</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <div class="box-right box">
            <div class="title">服务商</div>
            <div class="img"></div>
            <div class="desc">认证/检测/咨询/培训服务</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="footer">
      <div class="line1">Copyright@{{ showYear }} CNBOSS 版权所有-武汉华商知了信息技术有限公司</div>
       <div class="line2">
         <a href="https://beian.miit.gov.cn/" style="color: white;" target="_blank">
          备案 / 许可证编号: 鄂ICP备2023024382号-1
         </a>
         <img src="../assets/images/keji.png" style="margin-left: 5px;margin-top: 2px" />
         <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42010302002575" style="color: white;" target="_blank">
           鄂公网安备42010302002575号
         </a>
       </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  let showYear = new Date().getFullYear();
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1025px) {
  .box-container {
    max-height: 100vh;
    overflow: hidden;
  }
}
.box-container {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  background: #363635;

  .content {
    padding-top: 80px;
    padding-bottom: 10rem;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
    height: 100%;
    overflow-x: hidden;

    .box {
      width: 100%;
      height: calc(100vh - 12rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title {
        font-family: PangMenZhengDao;
        font-size: 2.5rem;
        color: #fff;
      }
      .img {
        width: 25rem;
        height: 25rem;
      }
      .desc {
        font-family: 'DreamHanSerifCNW27';
        font-size: 1.5rem;
        color: #fff;
      }
    }

    .box-left {
      .img {
        background: url('../assets/images/about/pic_qiye@2x.png') no-repeat;
        background-size: contain;
        background-position: center;
      }
    }
    .box-right {
      .img {
        background: url('../assets/images/about/pic_fuwushang@2x.png') no-repeat;
        background-size: contain;
        background-position: center;
      }
    }

    .box-center {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .wx {
        width: 100%;
        height: 15rem;
        background: url('../assets/images/cooperate/dialog-wx.png') no-repeat;
        background-size: contain;
        background-position: center;
        text-align: center;
      }
      .desc {
        font-size: 1.5rem;
        color: #fff;
        font-family: 'DreamHanSerifCNW27';
        margin-top: 1.5rem;
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    color: #fafafad1;
    text-align: center;
    .line1 {
      margin-bottom: 0.5rem;
    }
  }
}

@media screen and (max-width: 1024px) {
  .box-container {
    padding: 0 0.5rem;
    .content {
      padding-bottom: 6rem;
      .box {
        height: 26rem;
        .title {
          font-size: 1.5rem;
        }
        .img {
          width: 16rem;
          height: 15rem;
        }
        .desc {
          font-size: 1rem;
        }
      }
      .box-center {
        .wx {
          height: 12rem;
        }
        .desc {
          font-size: 1rem;
        }
      }
    }
    .footer {
      height: 7rem;
      font-size: 0.7rem;
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 2rem 1rem 3rem 1rem;

    }
  }
}
.line2>a{
  text-decoration: none;
}
.line2>a:hover{
  text-decoration: underline;
}
</style>
